<!DOCTYPE html>
<html>

<head>
        <title>GeoGebra Graphing Calculator in Popup Dialog</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="navigation.js"></script>
		<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
		 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<style>
		body div.ui-dialog {
			z-index:3!important;
		}
		body .ui-dialog .ui-dialog-content{
			padding:5px;
			overflow:hidden;
		}
		body .ui-dialog .ui-dialog-title{
			color:#999999;
		}
		body .ui-dialog .ui-dialog-title img{
			vertical-align: middle;
			margin-left: 1em;
		}
		body .ui-widget-header {
			background-color:#FAFAFA;
			border-color:#999999;
		}
		body {
			overflow:hidden;
		}
		.apps button{
			padding:10px 5px 10px 34px;
			border-radius:5px;
			background-color:#FAFAFA;
			border:#999999 1px solid;			
			background-repeat:no-repeat;
			background-position:7px 7px;
			
		}
		.app-icon-graphing{
			background-image:url("");
		}
		
		</style>
</head>

<body>
<div>
        <h1>GeoGebra Graphing Calculator in Popup Dialog</h1>
        <p style="width:800px">This demo shows embedding of <a href="example-graphing.html">GeoGebra Graphing Calculator</a> into a draggable dialog. The dialog is provided by <a href="https://jqueryui.com/draggable/">JQueryUI</a>.</p>
        <script type="text/javascript" src="https://cdn.geogebra.org/apps/deployggb.js"></script>

        <script type="text/javascript">
				var questionmark = "";

				function updateHelp(){
					$("#dialog").dialog("option",{"title":"GeoGebra Graphing Calculator<a target=\"_blank\" href=\"https://www.geogebra.org/m/vd6UC685\"><img src=\""+questionmark+"\"/></a>"});
				}
				function start(){
					updateHelp();
					if($("#dialog").dialog("isOpen")){
						$("#dialog").dialog("close");
					//if applet is initialized open it	
					}else {
                        $("#dialog").dialog("open");
						
						if(window.ggbApplet && ggbApplet.newConstruction){
							ggbApplet.newConstruction();
							checkWindowSize();
						}else{
							window.ggbOnInit = checkWindowSize;
						}
					}
					
				}
                var parameters = {
                        "appname":"graphing",
                        "id":"ggbApplet",
                        "width":800,
                        "height":600,
                        "showToolBar":true,
                        "borderColor":null,
                        "showMenuBar":false,
                        "allowStyleBar":true,
                        "showAlgebraInput":true,
                        "enableLabelDrags":false,
                        "enableShiftDragZoom":true,
                        "capturingThreshold":null,
                        "showToolBarHelp":false,
                        "errorDialogsActive":true,
                        "showTutorialLink":true,
                        "showLogging":true,
                        "useBrowserForJS":true,
						"disableAutoScale":true,
                        "perspective":"1"};
                var applet = new GGBApplet(parameters, '5.0', 'applet_container');
                //  when used with Math Apps Bundle, uncomment this:
                //  applet.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
                window.onload = function() { applet.inject('applet_container'); updateHelp('1');}
        </script>
		<div class="apps">
		<a href="#" onclick="start();return false;" class="btn app-icon-graphing">Graphing calculator</a>
		</div>

<div id="dialog" title="GeoGebra Math Apps">
  <div id="applet_container" style="min-width:800px;min-height:600px"></div>
</div>

		<script>
		var dialogPaddingV = 60;
		var dialogPaddingH = 10;		
		var dialogMarginH = 10;
		var dialogMarginV = 10;
		var dialogMinHeight = 300;
		var dialogMinWidth = 280;
		function checkWindowSize(){
		if(!$("#dialog").dialog("isOpen")){
		  return;
		}
				if(window.innerWidth < $("#dialog").dialog("option","width") + $("#dialog").parent().offset()["left"] + dialogMarginH){
					$("#dialog").parent().offset({"left":window.innerWidth - $("#dialog").dialog("option","width") - dialogMarginH});
				}
				if(window.innerWidth < $("#dialog").dialog("option","width") + dialogMarginH){
					var targetWidth = Math.max(dialogMinWidth, window.innerWidth);
					$("#dialog").parent().offset({"left":0})
					$("#dialog").dialog("option",{"width":targetWidth - dialogMarginH})
					window.ggbApplet && ggbApplet.setWidth(targetWidth -dialogPaddingH - dialogMarginH);
				}

				if(window.innerHeight < $("#dialog").dialog("option","height") + $("#dialog").parent().offset()["top"] + dialogMarginV){
					$("#dialog").parent().offset({"top":window.innerHeight - $("#dialog").dialog("option","height") - dialogMarginV});
				}
				if(window.innerHeight < $("#dialog").dialog("option","height")){
					var targetHeight = Math.max(dialogMinHeight, window.innerHeight);
					$("#dialog").parent().offset({"top":0})
					$("#dialog").dialog("option",{"height": targetHeight})
					window.ggbApplet && ggbApplet.setHeight(targetHeight -dialogPaddingV);
				}
		}
		$( function() {
			function dialogResize(e,ui){
				
				ggbApplet.setSize(ui.size.width-dialogPaddingH, ui.size.height-dialogPaddingV);
			}
			$("#dialog" ).dialog({
				width:810,
				height:600 + dialogPaddingV,
				minHeight: dialogMinHeight,
				minWidth: dialogMinWidth,
				resize:dialogResize,
				autoOpen: false});
			$("#dialog").data('dialog').uiDialog.draggable('option', {
				containment: [-100000,-10000,10000,10000],
				cancel: '.ui-dialog-titlebar-close, .GeoGebraFrame',
				handle: '.ui-dialog-titlebar, .ui-dialog-content'} );
			 
			window.addEventListener("resize",checkWindowSize);
			}
		);
		</script>
		</div>
</body>

</html>
